<template>
  <div class="h-[100%]">
    <div class="flex justify-between items-center h-[32px]">
      <div class="flex items-center justify-center">
        <SvgIcon icon-class="kuaijie" />
        <span class="ml-[4px] font-bold">快捷入口</span>
      </div>
      <div class="flex text-[14px] text-[#4e4e4e] h-[32px]">
        <template v-if="!isEdit">
          <MButton icon="eidt1" text="编辑" @click="handleEdit"/>
          <MButton icon="add" text="新增" class="ml-[8px]" @click="handleAdd" />
        </template>
        <template v-else>
          <div
            style="line-height: 28px"
            class="px-[16px] rounded-[4px] pointer bg-[#3487ff] text-[#fff] hover:opacity-70"
            @click="handleFinish"
          >
            完成
          </div>
        </template>
      </div>
    </div>
    <div class="overflow-auto list">
      <list :isEdit="isEdit" :data="list" ref="dropList" />
    </div>
  </div>
  <Add
    v-model="addVisible"
    :ids="addIds"
    @close="addIds = []"
    @refresh="getList"
  />
</template>
<script setup>
import { ElMessage } from "element-plus";
import MButton from "../MButton.vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import List from "./list.vue";
import { getQuickEntryList, editQuickEntry } from "@/api/system/user.js";
import Add from "./add/index.vue";
const list = ref([]);
const originalData = ref([]);
const getList = async () => {
  const { data } = await getQuickEntryList();
  originalData.value = data || [];
  list.value = data
    ?.reduce((result, item) => {
      const existingGroup = result?.find(
        (group) => group.name === item.top_menu_name
      );
      if (existingGroup) {
        existingGroup.sub.push(item);
      } else {
        result.push({
          name: item.top_menu_name,
          sub: [item],
        });
      }
      return result;
    }, [])
    ?.sort((a, b) => {
      return a.sort_by - b.sort_by;
    });
};
getList();
const isEdit = ref(false);
const handleEdit = () => {
  isEdit.value = true;
};
const dropList = ref();
const handleFinish = async () => {
  let dataObject = dropList.value.sortList;
  // console.log("dataObject", dataObject);
  let arr = [];
  if (dataObject) {
    for (let key in dataObject) {
      let item = dataObject[key].map((item, index) => {
        return { id: item.id, sort_by: index };
      });
      arr.push(...item);
    }
  }
  if (arr.length === 0) {
    isEdit.value = false;
    getList();
    return;
  }
  try {
    const { code, message } = await editQuickEntry(arr);
        isEdit.value = false;
    if (code !== 200) return ElMessage.error(message);
    ElMessage.success("编辑成功");
    dropList.value.clearSortList();
    getList();

  } catch (error) {}

  // isEdit.value = false;
};
const addVisible = ref(false);
const addIds = ref([]);
const handleAdd = () => {
  addVisible.value = true;
  addIds.value = originalData.value?.map((item) => item.menu_id);
};
</script>
<style scoped lang="scss">
.list {
  height: calc(100% - 36px);
  margin-top: 4px;
}
</style>
